<template>
  <div id="mine">
    <div id="div" v-show="avater_none == 1">
      将图片拖入此处进行上传
      <div class="close_icon" @click="close_avaterload()"></div>
    </div>
    <header>
      <h1 class="w">
        <div class="login_logo"><img src="/img/wlh/logo.png" alt="" /></div>
        <div class="page_name">婚礼纪用户个人信息管理</div>
      </h1>
    </header>
    <div class="login w">
      <div class="download_left">
        <img
          src="http://qnm.hunliji.com/o_1abi34nlkj491upu133a1l86h051a.jpg"
          alt=""
        />
      </div>
      <div class="login_box"></div>
    </div>
    <!-- 挂载页脚组件 -->
    <my-footer></my-footer>
    <!-- 用户信息修改窗口 -->
    <div class="update_msg">
      <!-- 用户头像展示 -->
      <div class="touxiang">
        <img :src="`/files/${avater}`" />
      </div>
      <!-- 用户个性信息的展示 -->
      <ul>
        <li><span>昵称:</span><input type="text" v-model="nickname" /></li>
        <li><span>性别:</span><input type="text" v-model="gender" /></li>
        <li><span>手机号:</span><input type="text" v-model="phone" /></li>
        <li><span>密码:</span><input type="text" v-model="upwd" /></li>
        <li><span>真实姓名:</span><input type="text" v-model="user_name" /></li>
        <li><span>邮箱:</span><input type="text" v-model="email" /></li>
        <li>
          <button class="new_avater" @click="open_uploadavater">
            {{ avater_none == 0 ? "上传新头像" : "点击关闭" }}
          </button>
        </li>
        <li>
          <button class="reload" @click="getInfo">重填信息</button>
          <button class="submit" @click="update">提交信息</button>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      nickname: "",
      upwd: "",
      email: "",
      phone: "",
      avater: "",
      user_name: "",
      gender: 0,
      //   变量上传头像窗口的关闭
      avater_none: 0,
    };
  },
  mounted() {
    //   首次页面打开先更新数据
    this.getInfo();
    //   上传用户头像
    this.uploadAvater();
  },
  methods: {
    //   显示上传头像的窗口
    open_uploadavater() {
      this.avater_none == 1 ? (this.avater_none = 0) : (this.avater_none = 1);
    },
    close_avaterload() {
      this.avater_none = 0;
    },
    //   页面加载时获取用户表该登录用户所有信息
    getInfo() {
      // 从浏览器sessionStorg仓库获取登陆成功的用户手机
      let ss = window.sessionStorage;
      this.phone = ss.phoneNumber;
      //  发送ajax请求，请求该用户的所有信息
      this.axios.get(`/user/getInfo?phone=${ss.phoneNumber}`).then((res) => {
        this.nickname = res.data[0].uname;
        this.upwd = res.data[0].upwd;
        this.email = res.data[0].email;
        this.user_name = res.data[0].user_name;
        this.gender = res.data[0].gender;
        this.avater = res.data[0].avater;
      });
    },
    // 上传用户头像的方法
    uploadAvater() {
      this.$nextTick(() => {
        let div = document.getElementById("div");
        div.addEventListener("dragover", (e) => {
          // 为div绑定dragover事件
          e.preventDefault(); //阻止默认事件，这样才可以触发drop
        });
        div.addEventListener("dragenter", (e) => {
          div.style.backgroundColor = "red";
        });
        div.addEventListener("dragleave", (e) => {
          div.style.backgroundColor = "antiquewhite";
        });
        div.addEventListener("drop", (e) => {
          e.preventDefault();
          // 为div绑定drop事件
          let files = e.dataTransfer.files;
          div.style.backgroundColor = "green";
          div.innerHTML = "上传成功！可以再次上传";
          // console.log(files);
          setTimeout(() => {
            this.avater_none = 0;
          }, 1000);

          // 1.实现文件上传
          let formData = new FormData();
          // 服务端接收字段名叫做uploadFile的数据作为文件来解析
          // 2.和服务器保持一致
          formData.append("uploadFile", files[0]); //files[0] 是获取拖拽上的第一个文件
          // 3.发请求
          // axios.post('http://127.0.0.1:3000/upload', formData)
          let instance = this.axios.create({
            headers: { "content-type": "multipart/form-data" },
          });
          instance.post("/files/upload", formData).then((res) => {
            console.log(res);
            //   将上传的文件名即用户头像暂时在本地先更新(要是用户点击提交再更新至服务器端)
            this.avater = res.data;
          });
        });
      });
    },
    update() {
      // 发送axios异步请求修改服务器端用户数据
      this.axios
        .put("/user/update", {
          uname: this.nickname,
          upwd: this.upwd,
          email: this.email,
          phone: this.phone,
          avater: this.avater,
          user_name: this.user_name,
          gender: this.gender,
        })
        .then((res) => {
          if (res.status == 200) {
            alert("恭喜您修改成功！");
          }
        });
    },
  },
};
</script>
<style scoped>
@import url(/css/mine.css);
</style>